settings に関するやり取りのアーカイブ
アーカイブ.icon
Settings 内で生じたやり取りのログをアーカイブする。
from Settings
井戸端にダークテーマを導入したい
from Settings
ログ
2024-05-04
13:04:26 CSSをbundle&minifyさせる方針に戻した
minify、あまり効果がない気がします...bsahd.icon
転送時はどうせgzip圧縮するので
minifyしない場合は開発中のコードだけインポートで、あとはbundle済みが使いやすいのでパフォーマンスが最適化されると思います。
すみませんうまく読解できませんでしたtakker.icon
minify、あまり効果がない気がしますが「minify有無が転送速度or合計読み込み時間に影響しない」と主張しているのはわかる
合計読み込み時間：Settings/style.cssおよびそこからimportしている全てのCSSの読み込み時間の合計
minifyしない場合は開発中のコードだけインポートが不明
minifyしない場合=bundle&minifyしない場合？それともminifyせずbundleのみした場合？
後者です。
開発中のコードだけインポートは個々のCSSを直接importのことかな
bundle済みが使いやすいのでパフォーマンスが最適化されると思います。
パフォーマンスは合計読み込み時間のパフォーマンスのことだと推測
個々のCSSを直接importするよりbundleさせたものを読み込んだほうが合計読み込み時間が短くなるということを述べている？
自分もそうだと思うtakker.icon
実際のところは計測しないとわからないけど
ただこれとminify、あまり効果がない気がしますがどう結びつくのかがわからない
やったこと
settingsの置換を図るページの置換を図るページとSettingsにあったコードとを見つつ、取り込むCSSを選定した
各UserCSSへのリンクの直下に、@import文を書く
以前はリンクとCSSが別々にまとまっていた
各CSSのimport元へすぐ飛べるようにした
一部の古い説明を削除
新規追加
development modeを導入
bundleせずにCSSを読み込む方式
今まで
style.cssに@import "./style_beforeBundle.css";を書くか、built codeを書くかで、test modeとproduction modeとを切り替えてた
コードブロック名をstyle.cssにしたり別の名前にしたりして切り替えてた
変更後
@import "./style_beforeBundle.css";をdev.cssに、built codeをdist.cssに貼り付ける
style.cssからはdev.cssかdist.cssのどちらかを読み込む
コメントアウトで切り替える
dev.cssにはdevelopment modeであることがわかるようなバナーを仕込んだ
1段余計なimportが挟まるようになったので、若干遅くなるかもしれないtakker.icon
気になるようであれば前のに戻して構いません
(2024/5/4 一日限り)settingsの置換を図るページの置換を図るページ-bundledのCSSを使う
(2024/5/1~)settingsの置換を図るページの置換を図るページのCSSを使う
(2024/02/24~)settingsの置換を図るページのCSSを使う
イベント
井戸端クリスマスモードUserCSS
code:style_beforeBundle.css.disabled(css)
@import "https://scrapbox.io/api/code/villagepump/井戸端クリスマスモードUserCSS/style.css";
11月下旬～12月中にオンにする。
2022-02-05
機能しないファイルが年中読み込まれるのもどうかと思ったのでクリスマスモード外しましたkuuote.icon
それもそうかtakker.icon
大したコード量じゃないから放置してもいいかなとも思ったけど
CSSのperseに負荷がかかるから減らすに越したことはないのか
11月の終わりに有効化すればいいかな
from Settings
切り出し作業中]多分終了した
cf. Settingsが重すぎる
やっていること
UserCSSの機能ごとに適当なタイトルを付けて切り出す
一応、切り出し毎に記法サンプルで表示に不具合がないか確認するようにしているMijikko.icon
/icons/ありがと.icontakker.icon
切り出し先のCSSをimportする文を↓に書く
多いなぁMijikko.icon
1行だけのも結構あるしtakker.icon
2022-02-11 20:41:51 全角スペースが入っていたのが原因で、日章旗以降の全てのUserCSSが無効になっていましたtakker.icon
code:diff
+@import "../日章旗/style.css"; /* 新規作成ボタンを置き換える */
-@import "../日章旗/style.css";　/* 新規作成ボタンを置き換える */
全角スペースが見えるようなフォントを使うといいのかも？
Google Fontsになんかないかな
なかった
style.css直打ちコード
最後の@importの次行以降に記述してください
Streamのフォントをレトロゲームみたくする
2021-09-27 なんとなく追加
2022-02-06 18:24:21 Font Awesomeを常時使えるようにするUserCSSに併せてfontを追加した
2022-03-15 12:02:22 performanceの問題がありそうなので外した
特に違いがなさそうなら戻すつもり
12:04:00 見違えるほど表示が速くなったtakker.icon
いままで2回文字が消えていた
↓をはずしたら一発でrenderingされるようになった
これボトルネックだったんだ
code:style_beforeBundle.css.disabled(css)
@import url("https://fonts.googleapis.com/css?family=DotGothic16");
.stream {
font-family: 'DotGothic16', helvetica, arial, "Font Awesome 5 Free","Font Awesome 5 Brands", "AppIcons", sans-serif;
}
Streamで背景色や画像が途切れないようにする
code:style_beforeBundle.css
.stream h1 {
background-color: transparent;
}
mobile edit menuを押せるように、.expandable-menuの長さを制限する
@media screenはscrapboxのトップページへのリンクをnav barに固定するUserCSSに合わせた
このUserCSSの設定、冗長すぎやしないか？takker.icon
設定をシンプルにしたい
code:style_beforeBundle.css.disabled(css)
.expandable-menu {
max-width: calc(100% - 186px); /* 126 + 60 */
}
@media screen and (min-width: 768px) and (max-width: 991px) {
.expandable-menu {
max-width: calc(100% - 201px); /* 126 + 60 + 15 */
}
}
@media screen and (min-width: 992px) and (max-width: 1260px) {
.expandable-menu {
max-width: calc(100% - 216px); /* 126 + 60 30 */
}
}